<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="/commons/jsp/taglibs.jsp"%>
<html>
  <head>
	<title>公共平台 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- 样式文件的引入 -->
	<link href="${ctx}/commons/css/style.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/icon.css">
	<!-- jqueryUI JS文件的引入 -->
	<script type="text/javascript" src="${ctx}/commons/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/easyui-extends-validate.js"></script>
	<!-- jqueryUI国际化 -->
	<script type="text/javascript" src="${ctx}/commons/js/easyui-lang-zh_CN.js"></script>
	<!-- 开发使用的公用js方法 -->
	<script type="text/javascript" src="${ctx}/commons/js/common.js"></script>
	<!-- 开发国际化的引用，主要完成后台信息在前台提示的国际化，一定要放在最后 -->
	<script type="text/javascript">var ctx = '${ctx}';var actionExt = "action";var i18n = new Object();</script>
	<script src="${ctx}/commons/js/i18n/message_zh_CN.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div class="easyui-layout" data-options="fit:true,border:false" >
		<div data-options="region:'center',border:true" >
			<table id="listRoleTable" class="easyui-datagrid" 
				data-options="singleSelect:false,toolbar:'#roletb',method:'post',rownumbers:true,fit:true,fitColumns:true,border:false,nowrap:true,
					pagination:true,remoteSort:true,multiSort:true,striped:true,onLoadSuccess:function(data){$('#'+roleParamObj.searchID).attr('disabled',false);},
					url:'${ctx}/framework/role/list'"}>
				<thead>
					<tr>
						<th data-options="field:'id',checkbox:true"></th>
						<th data-options="field:'name',width:100,sortable:true,formatter: function(value,row,index){
								return '<a href=javascript:void(0);  onclick=openDataDialog(roleParamObj,\''+row.id+'\') >'+value+'</a>';
							},title:'角色名称'"></th>
						<th data-options="field:'remark',width:100,title:'角色说明'"></th>
						<th data-options="field:'createTime',sortable:true,width:50,title:'添加时间'" align="center"></th>
						<th data-options="field:'updateTime',sortable:true,width:50,title:'更新时间'" align="center"></th>
					</tr>
				</thead>
			</table>
			<div id="roletb" style="display: none;">
				<div>
					<a href="javascript:void(0);" onclick="openDataDialog(roleParamObj);" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
					<a href="javascript:void(0);" onclick="updateData(roleParamObj);" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
					<a href="javascript:void(0);" onclick="deleteData(roleParamObj);" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
					<a href="javascript:void(0);" onclick="bindMenu();" class="easyui-linkbutton" iconCls="icon-menu-icon" plain="true">绑定权限</a>
					<!-- <a href="javascript:void(0);" onclick="bindUser();" class="easyui-linkbutton" data-options="iconCls:'icon-user-icon'" plain="true">用户绑定</a> -->
				</div>
			</div>
		</div>
	</div>
	<div id="ModelTreeDialog" class="easyui-dialog" title="菜单选择树" style="width:320px;height:442px;padding:8px;padding-top: 0px;" 
	data-options="iconCls: 'icon-menu-icon',method:'post',closed:true,modal: true,toolbar:'#Tool',
				buttons: [{	text:'绑定',	iconCls:'icon-ok',	handler:function(){getSelectsModelNode();	}},
						{	text:'取消',	iconCls:'icon-cancel',	handler:function(){		$('#ModelTreeDialog').dialog('close');	}}]">
	<ul id="ModelTree" class="easyui-tree" data-options="url:'',method:'get',animate:false,checkbox:true,cascadeCheck:false,
															loadFilter:function(data){ids=data.selIds;return data.tree;},
															formatter:function(node){	if(ids != undefined){		
																for(var i=0;i<ids.length;i++){			if(node.id == ids[i]){				
																return '<span style=\'color:red;font-weight: bold;\'>'+node.text+'</span>';			
																}}}	
																return node.text;
															}">
	</ul>
	</div>
	
</body>
	<script type="text/javascript">
		//初始化表格对应的js对象
		var roleParamObj;
		$(function() {
			//初始化表格对象数据
			roleParamObj = new initParams(
					{
						paramObjName : 'roleParamObj',//表格对应的实体对象名称，好区分多个表格情况下的对象
						tableId:'listRoleTable',
						addDataFormId:'addRoleDataForm',
						showDialogId:'firstLevelDialog',
						updateUrl:"${ctx}/framework/role/input?id=",
						deleteUrl:'${ctx}/framework/role/remove',
						addDialogWidth:500,
						addDialogHeight:256,
						ctx:'${ctx}',
						addDialogTitle:'角色信息'
					});
			//初始化查询
			init(roleParamObj);
		});
		function bindMenu(){
			var records = $('#'+roleParamObj.tableId).datagrid('getSelections');
			if(records.length != 1){
				$.messager.alert('提示',"请选择一条记录！",'info');
			}else{
				$.ajax({
					type: "get",
					timeout:20000,
					url:  "${ctx}/framework/role/roleMenus?r="+new Date().getTime(),
					data:{"id":records[0].id},
					success: function(data){
						if(data.length > 0){
							var disModeNode = "";
							for(var i=0;i<data.length;i++){
								if(i==0){
									disModeNode += data[i].modelId;
								}else{
									disModeNode += ","+data[i].modelId;
								}
							}
							selModelTree(disModeNode);
						}else{
							selModelTree('');
						}
						$('#ModelTreeDialog').dialog('open');
					},
					error: function(){
						$.messager.alert('提示',i18n.requestError,'error');
					}
				});
			}
		}
		var ids;
		function getSelectsModelNode(){	
			var nodes = $('#ModelTree').tree('getChecked');	
			var nodeNames = '';	
			var nodeIds = '';	
			for(var i=0; i<nodes.length; i++){		
				if (nodeNames != '') 
					nodeNames += ',';		
				nodeNames += nodes[i].text;		
				if (nodeIds != '') 
					nodeIds += ',';		
				nodeIds += nodes[i].id;	
			}	
			var records = $('#'+roleParamObj.tableId).datagrid('getSelections');
			$.ajax({
				type: "POST",
				timeout:20000,
				url:  "${ctx}/framework/role/bindMenu?r="+new Date().getTime(),
				data:{"deleteIds":nodeIds,"id":records[0].id},
				success: function(data){
					var msn = ''||i18n[''];
					msn = msn||i18n[data];	
					if(msn == undefined){
						$.messager.alert('提示',i18n.serverError,'info');
					}else if(msn)	{	
						$.messager.alert('提示',msn,'info',function(){$('#ModelTreeDialog').dialog('close');});
					}
				},
				error: function(){
					$.messager.alert('提示',i18n.requestError,'error');
				}
			});
		}
		function selModelTree(selectIds){
			$('#ModelTree').tree('options').url='${ctx}/framework/menu/getModelTreeDialog?nodeName='+encodeURI(encodeURI($('#selModelTreeName').val()))+'&deleteIds='+selectIds;
			$('#ModelTree').tree({onLoadSuccess:function(node, data){
					var nodeIds = selectIds.split(',');
					for(var i=0;i<nodeIds.length;i++){
						var node = $('#ModelTree').tree('find', nodeIds[i]);
						if(node){
							$('#ModelTree').tree('expand', node.target).tree('check', node.target);
						}
					}
			}});
		}
		function bindUser(){
			var records = $('#'+roleParamObj.tableId).datagrid('getSelections');
			if(records.length != 1){
				$.messager.alert('提示',"请选择一条记录！",'info');
			}else{
				top.$('#secondtLevelDialog').dialog({    
				    title:"绑定用户",  
				    iconCls:'icon-user-menu',
				    width: 700,    
				    height: 400,    
				    closed: false,    
				    inline : true,
				    cache: false,    
				    href: "${ctx}/framework/role/bind-user.jsp?roleId="+records[0].id,    
				    modal: true,
				    buttons : []
				}).dialog('open');
			}
		}
	</script>
  </body>
</html>